<template>
  <div>
    <div class="comment" v-for="item in commentList" :key="item.commentId">
      <div class="info">
        <el-avatar :size="50" src="https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif"></el-avatar>
        <div class="right">
          <div class="name">{{ item.fromName }}</div>
          <div class="date">{{ item.createTime }}</div>
        </div>
      </div>
      <div class="commentContent">{{ item.content }}</div>
      <div class="control">
        <like :like-list="item"></like>
        <span style="margin-right: 20px">{{ item.likeCount > 0 ? item.likeCount + '人赞' : '赞' }}</span>
        <span class="comment-reply" @click="replyTo(item)">
            <i class="el-icon-chat-square"></i>
            <span>回复</span>
        </span>
        <span v-if="item.fromId == $store.getters.userId" class="reply-delete" @click="$store.dispatch('deleteComment', item)">
          <i class="el-icon-delete"></i>
          <span>删除</span>
        </span>
      </div>
      <div class="reply">
        <comment-item :children-reply="reply" v-for=" reply in item.replyList" :key="reply.commentId" :current-page="currentPage" :page-size="pageSize"></comment-item>
      </div>
      <CommentBox class="show-comment" :id="item.commentId" :to-info="item" :current-page="currentPage" :page-size="pageSize"></CommentBox>
    </div>
  </div>

</template>

<script>
import CommentBox from '@/components/Comment/CommentBox'
import CommentItem from '@/components/Comment/CommentItem'
import Like from '@/components/Comment/Like'
import {deleteComment} from "@/api/comment";
import {clearAllMsg} from "@/api/userMessage";
export default {
  name: "index",
  components: {CommentBox, CommentItem, Like},
  props: {
    commentList: {
      type: Array,
      required: true
    },
    currentPage:{
      type: Number
    },
    pageSize:{
      type: Number
    }
  },
  computed: {},
  data() {
    return {
      isLike: false,
    }
  },
  methods: {
    replyTo(root) {
      //显示和隐藏回复框
      let lists = document.getElementsByClassName("show-comment");
      for (let i = 0; i < lists.length; i++) {
        lists[i].style.display = 'none';
      }
      document.getElementById(root.commentId).style.display = 'block';
    },
  },
  created() {
  }
}
</script>

<style lang="scss">

.reply-delete {
  display: flex;
  align-items: center;
  margin-left: 5px;
  cursor: pointer;

  &:hover {
    color: #333;
  }

  .icon-comment {
    margin-right: 5px;
  }
}

.show-comment {
  display: none;
}

.comment {
  display: flex;
  flex-direction: column;
  padding: 10px;
  border-bottom: 1px solid #F2F6FC;

  .info {
    display: flex;
    align-items: center;

    .avatar {
      border-radius: 50%;
    }

    .right {
      display: flex;
      flex-direction: column;
      margin-left: 10px;

      .name {
        font-size: 16px;
        color: #303133;
        margin-bottom: 5px;
        font-weight: 500;
      }

      .date {
        font-size: 12px;
        color: #909399;
      }
    }
  }

  .commentContent {
    font-size: 16px;
    color: #303133;
    line-height: 20px;
    padding: 10px 0;
  }

  .control {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #909399;

    .like {
      display: flex;
      align-items: center;
      cursor: pointer;

      &.active, &:hover {
        color: #409EFF;
      }

      .iconfont {
        font-size: 14px;
        margin-right: 5px;
      }
    }

    .comment-reply {
      display: flex;
      align-items: center;
      cursor: pointer;

      &:hover {
        color: #333;
      }

      .iconfont {
        font-size: 16px;
        margin-right: 5px;
      }
    }

  }

  .reply {
    margin: 10px 0;
    border-left: 2px solid #DCDFE6;

    .item {
      margin: 0 10px;
      padding: 10px 0;
      border-bottom: 1px dashed #EBEEF5;

      .reply-content {
        display: flex;
        align-items: center;
        font-size: 14px;
        color: #303133;

        .from-name {
          color: #409EFF;
        }

        .to-name {
          color: #409EFF;
          margin-left: 5px;
          margin-right: 5px;
        }
      }

      .reply-bottom {
        display: flex;
        align-items: center;
        margin-top: 6px;
        font-size: 12px;
        color: #909399;

        .reply-text {
          display: flex;
          align-items: center;
          margin-left: 10px;
          cursor: pointer;

          &:hover {
            color: #333;
          }

          .icon-comment {
            margin-right: 5px;
          }
        }
      }
    }

    .write-reply {
      display: flex;
      align-items: center;
      font-size: 14px;
      color: #909399;
      padding: 10px;
      cursor: pointer;

      &:hover {
        color: #303133;
      }

      .el-icon-edit {
        margin-right: 5px;
      }
    }

    .fade-enter-active, fade-leave-active {
      transition: opacity 0.5s;
    }

    .fade-enter, .fade-leave-to {
      opacity: 0;
    }

    .input-wrapper {
      padding: 10px;

      .gray-bg-input, .el-input__inner {
        /*background-color: #67C23A;*/
      }

      .btn-control {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding-top: 10px;

        .cancel {
          font-size: 16px;
          color: #606266;
          margin-right: 20px;
          cursor: pointer;

          &:hover {
            color: #333;
          }
        }

        .confirm {
          font-size: 16px;
        }
      }
    }
  }
}

</style>

